<template>
	<uni-nav-bar :border="false" statusBar :fixed="fixed" :height="height" :backgroundColor="thmeBackgroundColor"
		leftWidth="60rpx" right-width="60rpx">
		<view class="navbar-title">
			<block v-if="title">
				{{ title }}
			</block>
			<block v-else>
				<!-- 导航栏顶部内容 -->
				<slot></slot>
			</block>
		</view>
		<view class="navbar-left" slot="left" @click="onClickLeft">
			<block v-if="useBack && isIconfont">
				<uni-icons custom-prefix="custom-icon" :type="backImage" :size="backImageSize" />
			</block>
			<block v-if="useBack && !isIconfont">
				<uni-icons :type="backImage" :color="backImageColor" :size="backImageSize" />
			</block>
		</view>
	</uni-nav-bar>
</template>

<script>
	//导航栏组件，主要用于头部导航，依赖于uni-ui的uni-nav-bar
	//@group 全局组件
	export default {
		//
		name: 'navbar',
		//
		props: {
			//导航栏标题
			title: {
				type: String,
				default: ''
			},
			//是否固定
			fixed: {
				type: Boolean,
				default: false
			},
			//导航栏高度
			height: {
				type: [String, Number],
				default: '44'
			},
			//导航栏背景色
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			//是否显示返回按钮
			useBack: {
				type: Boolean,
				default: true
			},
			//是否使用阿里图库
			isIconfont: {
				type: Boolean,
				default: false
			},
			//自定义返回图标，只支持阿里图标库，传名字即可，只有在isIconfont等于true时有效
			backImage: {
				type: String,
				default: 'left'
			},
			//自定义返回图标大小，只支持阿里图标库，传大小即可，只有在isIconfont等于true时有效
			backImageSize: {
				type: [String, Number],
				default: 18
			},
			//自定义返回图标颜色，只支持阿里图标库，传颜色值16进制即可，只有在isIconfont等于true时有效
			backImageColor: {
				type: String,
				default: '#666'
			},
		},
		//
		data() {
			return {};
		},
		//
		computed: {
			thmeBackgroundColor() {
				return this.fixed && this.backgroundColor === 'transparent' ? '#fff' : this.backgroundColor;
			}
		},
		//
		methods: {
			onClickLeft: function() {
				//点击回退按钮的回调
				//@arg 向父组件传递已经点击，参数为布尔值，值为true）
				this.$emit('navbar:backPage', true);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.navbar-title {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		font-weight: bold;
		width: 100%;
	}

	.navbar-left {
		.icon {
			font-size: 48rpx;
		}
	}
</style>